<template>
	<view class="enter-code">
		<u-navbar back-icon-size="40" :border-bottom="false"></u-navbar>
		<view class="enter-code-tit">请您输入验证码</view>
		<view class="enter-code-tips">
			<view>点击发送验证码，验证成功后自动登录</view>
			<view>
				<text>+86 {{phone}} </text>
				<view :class="['get-code',{isSend: isSend}]" @click="getPicCode" v-if="!isSend">{{isSend?'重新发送':'发送验证码'}}</view>
				<view :class="['get-code',{isSend: isSend}]" v-else>{{count}}s</view>
			</view>
		</view>
		<!-- <valid-code ref="code" :maxlength="6" :isPwd="false" @finish="getCodeNumber" class="enter-code-box"></valid-code> -->
		<view style="margin-top: 40rpx;">
			<u-message-input 
				mode="bottomLine" 
				:maxlength="6" 
				:focus="true" 
				inactive-color="#141414" 
				active-color="#F59359" 
				width="100"
				:bold="false"
				@finish="getCodeNumber">
			</u-message-input>
		</view>
		<!-- <view class="enter-code-countDown" v-if="isSend">{{count}}s</view> -->
		<view :class="['get-code']">确定</view>
		<pt-loading></pt-loading>
		
		<uni-popup type="center" ref="confirm" :maskClick="false">
			<view class="confirm-auth">
				<view class="confirm-auth-title">请同意浏览总部商品</view>
				<button open-type="getUserInfo" @getuserinfo="getuserinfo">确定</button>
			</view>
		</uni-popup>
		
		<uni-popup type="center" ref="getCode">
			<view class="getCode">
				<view class="getCode-box">
					<input placeholder="请输入图片验证码" v-model="code" />
					<image :src="codeUrl" mode="widthFix" @click="getPicCode(1)"></image>
				</view>
				<view class="confirm-pic-code" @click="send()">立即发送验证码</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				isSend: false,
				count: 60,
				code: '',
				codeUrl: ''
			}
		},
		onLoad(option) {
			this.phone = option.phone
		},
		methods: {
			getPicCode(type){
				this.$u.api.GetPicCode().then(res => {
					if(type){
						this.code = ''
					}
					this.codeUrl = res.datas
					this.$refs.getCode.open()
				})
			},
			addFoot(where,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: 1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
			countDown() {
				var time = setInterval(() => {
					this.count--
					if (this.count < 1) {
						clearInterval(time)
						this.count = 60
						this.isSend = false
					}
				}, 1000)
			},
			send() {
				if(!this.code){
					uni.showToast({
						icon: 'none',
						title: '请输入图片验证码'
					})
					return
				}
				if(this.isSend){
					uni.showToast({
						icon: 'none',
						title: '未收到验证码？请' + this.count + '秒后重试',
						duration: 1500
					})
					return
				}
				let data = {
					captcha: this.code,
					phone: this.phone,
					login_code: 'login'
				}
				this.$u.apiWei.PhoneGetCode(data).then(res => {
					this.isSend = true
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.$refs.getCode.close()
					this.countDown()
				}).catch(err => {
					this.getPicCode()
					this.code = ''
				})
			},
			goback() {
				uni.navigateBack()
			},
			getShare(){
				let data = {
					paramter: 1,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
				}
				this.$u.api.StoreInfo(data).then(res => {
					let obj = {
						service_code: res.datas[0].store_service_code || res.datas[0].service_code,
						service_phone: res.datas[0].store_service_phone
					}
					uni.setStorageSync('serviceInfo',obj)
				})
			},
			getCodeNumber(e) {
				uni.hideKeyboard()
				uni.showLoading({
					mask: true
				})
				let data = {
					parent_id: uni.getStorageSync('parent_id')?uni.getStorageSync('parent_id'):'',
					//#ifdef MP-WEIXIN
					client: 1,
					// #endif
					//#ifdef APP-PLUS
					client: 2,
					// #endif
					//#ifdef H5
					client: 4,
					// #endif
					phone: this.phone,
					code: e
				}
				this.$u.apiWei.NewPhoneLogin(data).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.datas))
					// #ifdef MP-WEIXIN
					if(!res.datas.form_id){
						uni.hideLoading()
						this.$refs.confirm.open()
						return
					}
					// #endif
					uni.showToast({
						icon: 'none',
						title: '验证成功，正在登录',
						duration: 1500
					})
					this.addFoot('登陆页-手机号码登陆','#客户登录了，请注意查看客户详情')
					setTimeout(() => {
						if(uni.getStorageSync('newurl')){
							if(uni.getStorageSync('newurl').indexOf('index/index') != -1 || uni.getStorageSync('newurl').indexOf('merchant/merchant') != -1 || uni.getStorageSync('newurl').indexOf('case/case') != -1 || uni.getStorageSync('newurl').indexOf('classify/classify') != -1){
								uni.switchTab({
									url: uni.getStorageSync('newurl'),
									success: () => {
										uni.removeStorageSync('newurl')
									}
								})
							}else{
								uni.redirectTo({
									url: uni.getStorageSync('newurl'),
									success: () => {
										uni.removeStorageSync('newurl')
									}
								})
							}
						}else{
							// #ifdef MP-WEIXIN
							if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
								uni.switchTab({
									url: '/pages/merchant/merchant'
								})
							}else{
								if(res.datas.is_show==2){
									uni.switchTab({
										url: '/pages/merchant/merchant'
									})
								}else{
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
								if(res.datas.is_open==1){
									uni.setStorageSync('is_open',true)
								}else{
									uni.setStorageSync('is_open',false)
								}
							}
							// #endif
							// #ifdef APP-PLUS || H5
							if(res.datas.is_show==2){
								uni.switchTab({
									url: '/pages/merchant/merchant'
								})
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
							if(res.datas.is_open==1){
								uni.setStorageSync('is_open',true)
							}else{
								uni.setStorageSync('is_open',false)
							}
							// #endif
						}
					}, 1500)
					this.$nextTick(() => {
						this.getShare()
						this.$u.api.UserNoticeCount().then(res => {
							if(res.datas){
								if(res.datas > 99){
									this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count','99+')
									this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count','99+')
								}else{
									this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count',res.datas)
									this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count',res.datas)
								}
							}else{
								this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count',0)
								this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count',0)
							}
						})
					},200)
				})
			},
			// 绑定微信信息
			getuserinfo(e){
				uni.showLoading({
					title: '请稍后···'
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'weixin',
							success: (userInfo) => {
								uni.hideLoading()
								let data = {
									code: loginRes.code,
									parent_id: uni.getStorageSync('parent_id')?uni.getStorageSync('parent_id'):'',
									encryptedData: userInfo.encryptedData,
									iv: userInfo.iv,
									phone: this.phone,
									key: this.token
								}
								this.$u.api.WeChatWxLogin(data).then(res => {
									uni.setStorageSync('userInfo',JSON.stringify(res.datas))
									uni.showToast({
										icon: 'none',
										title: '登录成功',
										duration: 1500
									})
									setTimeout(() => {
										if(uni.getStorageSync('newurl')){
											if(uni.getStorageSync('newurl').indexOf('index/index') != -1 || uni.getStorageSync('newurl').indexOf('merchant/merchant') != -1 || uni.getStorageSync('newurl').indexOf('case/case') != -1 || uni.getStorageSync('newurl').indexOf('classify/classify') != -1){
												uni.switchTab({
													url: uni.getStorageSync('newurl'),
													success: () => {
														uni.removeStorageSync('newurl')
													}
												})
											}else{
												uni.redirectTo({
													url: uni.getStorageSync('newurl'),
													success: () => {
														uni.removeStorageSync('newurl')
													}
												})
											}
										}else{
											// #ifdef MP-WEIXIN
											if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
												uni.switchTab({
													url: '/pages/merchant/merchant'
												})
											}else{
												if(res.datas.is_show==2){
													uni.switchTab({
														url: '/pages/merchant/merchant'
													})
												}else{
													uni.switchTab({
														url: '/pages/index/index'
													})
												}
												if(res.datas.is_open==1){
													uni.setStorageSync('is_open',true)
												}else{
													uni.setStorageSync('is_open',false)
												}
											}
											// #endif
											// #ifdef APP-PLUS || H5
											if(res.datas.is_show==2){
												uni.switchTab({
													url: '/pages/merchant/merchant'
												})
											}else{
												uni.switchTab({
													url: '/pages/index/index'
												})
											}
											if(res.datas.is_open==1){
												uni.setStorageSync('is_open',true)
											}else{
												uni.setStorageSync('is_open',false)
											}
											// #endif
										}
									}, 1500)
								})
							},
							fail: (fail) => {
								uni.showToast({
									icon: 'none',
									title: '您已拒绝，无法进入总部浏览商品，请重新点击确定授权或进入设置开启授权',
									duration: 3000
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.login {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		image.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.login-top {
			position: absolute;
			left: 0;
			right: 0;
			top: 154rpx;
			text-align: center;
			color: #FFF;

			.login-top-ico {
				image {
					width: 188rpx;
					height: 150rpx;
				}
			}

			.login-top-tit {
				margin-top: 45rpx;
				font-size: 48rpx;
			}
		}

		.login-bottom {
			position: absolute;
			/* #ifdef APP-PLUS */
			bottom: 34rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN || H5 */
			bottom: 150rpx;
			/* #endif */
			left: 0;
			right: 0;
			text-align: center;
			padding: 0 85rpx;

			.isAppleLogin {
				height: 100rpx;
				line-height: 96rpx;
				border-radius: 50rpx;
				margin-bottom: 80rpx;
				border: solid 2rpx #000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					vertical-align: top;
					margin: -5rpx 10rpx 0 0;
				}
			}

			.phone-login {
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
				background-color: #2073F5;
				color: #FFF;
				font-size: 36rpx;
			}

			.mini-program-phone {
				background-color: rgba(255, 255, 255, .7);
				margin-top: 30rpx;
				color: #666;
			}

			.go-home {
				margin-top: 40rpx;
				font-size: 30rpx;
				color: #FFF;
			}

			.others-login {
				margin-top: 80rpx;
				color: #FFF;

				.others-login-tit {
					display: inline-block;
					vertical-align: middle;
					margin: 0 20rpx;
					font-size: 30rpx;

					&::before,
					&::after {
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 90rpx;
						height: 1px;
						background-color: #FFF;
					}
				}
			}

			.wechat-login {
				margin-top: 35rpx;
				color: #FFF;

				view {
					font-size: 26rpx;

					&:first-child {
						margin-bottom: 20rpx;
					}

					image {
						width: 90rpx;
						height: 90rpx;
					}
				}
			}
		}

		.enter-phone-agree {
			display: flex;
			align-items: flex-start;
			justify-content: left;
			margin-top: 40rpx;
			margin-bottom: -40rpx;

			image {
				width: 45rpx;
				height: 45rpx;
				margin-right: 10rpx;
			}

			view {
				line-height: 52rpx;
				color: #FFF;
				text-align: left;
				flex: 1;
				font-size: 26rpx;

				text {
					color: #2073F5;
				}
			}
		}
	}

	.enter-phone {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		padding: 50rpx 25rpx 0;

		.enter-phone-close {
			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.enter-phone-tit {
			margin-top: 50rpx;

			text {
				display: block;

				&:first-child {
					font-size: 48rpx;
					font-weight: bold;
				}

				&:last-child {
					margin-top: 30rpx;
					font-size: 42rpx;
				}
			}
		}

		.enter-phone-input {
			border-bottom: solid 2rpx #DBDBDB;
			margin-top: 100rpx;

			input {
				font-size: 32rpx;
				padding: 30rpx 0;
			}
		}

		.enter-phone-btn {
			margin-top: 100rpx;

			button {
				background: rgba(32, 115, 245, .2);
				border-radius: 50rpx;
				height: 100rpx;
				line-height: 100rpx;

				&::after {
					display: none;
				}

				&.active {
					background: rgba(32, 115, 245, 1);
				}
			}
		}
	}

	.enter-code {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;

		.enter-code-back {
			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.enter-code-tit {
			margin: 80rpx 0;
			font-size: 48rpx;
			padding: 0 30rpx;
		}

		.enter-code-tips {
			padding: 0 30rpx;
			/* #ifdef MP-WEIXIN */
			margin-bottom: 50rpx;
			/* #endif */
			view {
				
				color: #999;
				font-size: 28rpx;
				&:last-child {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.get-code{
						color: #FFF;
						margin: 0;
						width: auto;
						padding: 0 10px;
						background-color: #F59359;
						height: 60rpx;
						line-height: 60rpx;
						margin-left: 20rpx;
						font-size: 24rpx;
						&.isSend{
							background-color: rgba(20,20,20,.5);
						}
					}
				}
				
			}
		}

		.enter-code-box {
			margin: 50rpx 0;
		}

		.enter-code-countDown {
			text-align: center;
			font-size: 30rpx;
			color: #141414;
			font-weight: bold;
			/* #ifdef MP-WEIXIN */
			margin-top: 50rpx;
			/* #endif */
		}
	}

	.confirm-auth{
		width: 400rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.confirm-auth-title{
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: #141414;
			color: #FFF;
			font-size: 30rpx;
		}
		button::after{
			display: none;
		}
	}

	.protocol {
		background-color: #FFF;
		padding: 30rpx;
		box-sizing: border-box;
		max-height: 600rpx;

		.protocol-scroll-view {
			width: 100%;
			max-height: 540rpx;
			line-height: 50rpx;
			color: #666;

			view {
				font-size: 24rpx;

				&.title {
					text-align: center;
					margin-bottom: 30rpx;
					font-size: 36rpx;
					color: #333;
				}
			}
		}
	}

	.close {
		text-align: right;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
	
	.get-code {
		margin: 0 auto;
		margin-top: 80rpx;
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #141414;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		&.isSend{
			background-color: rgba(20,20,20,.5);
		}
	}
	.getCode{
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 30rpx;
		.getCode-box{
			display: flex;
			align-items: center;
			input{
				font-size: 28rpx;
				border: solid 2rpx #EEE;
				border-radius: 5rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
			image{
				width: 200rpx;
				border: solid 2rpx #EEE;
			}
		}
		.confirm-pic-code{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			background-color: #141414;
			color: #FFF;
			margin-top: 30rpx;
		}
	}
</style>
